<template>
    <view class="navbar" :style="{
        height: appInfo.getAppInfo().statusBarHeight + appInfo.getAppInfo().navBarHeight + 'px',
        // 包含连字符的属性名必须加引号
        'padding-top': appInfo.getAppInfo().statusBarHeight + 'px'
    }">
        <view class="left">
            <view class="iconfont icon-tiku" v-if="showLeft" @click="leftClick"></view>
        </view>
        <view class="content">
            <view v-if="title">
                {{ title }}
            </view>
            <slot></slot>
        </view>
        <view class="right">
            <!-- 具名插槽 name:right -->
             <slot name="right"></slot>
        </view>
    </view>
</template>

<script setup>
import { useAppInfoStore } from '@/store/appInfo.js'
const appInfo = useAppInfoStore();

const props = defineProps({
    showLeft: {
        type: Boolean,
    },
    title: {
        type: String,
    },
    leftClick:{
        type:Function
    }
})

//定义leftClick方法 uni.navigateBack
const leftClick = ()=>{
    if(props.leftClick){
        props.leftClick();
    }else{
        uni.navigateBack();
    }
}

</script>

<style lang="scss" scoped>
.navbar {
    background: linear-gradient(to right, #00BFFF, #87CEFA);
    width: 100%;
    position: fixed;
    z-index: 100;
    display: flex;
    color: #fff;
    align-items: center;
    justify-content: center;
    padding: 0 10px;

    .left {
        width: 20px;
    }

    .content {
        text-align: center;
        flex: 1
    }

    .right {
        width: 20px
    }
}
</style>
